<template>
  <div>
    <top-data></top-data>

    <div class="toubu">
      <div class="toubu-son">
        <p :class="{ con: fenleiName == value }" @click="fenlei(value)">
          全部结果
        </p>
        >
        <!-- <div class="saixuan">
            xxxxx
            <div class="saixuan-son">
              <ul>
                <li>健身屏</li>
                <li>健身屏</li>
                <li>健身屏</li>
                <li>健身屏</li>
                <li>健身屏</li>
                <li>健身屏</li>
              </ul>
            </div>
          </div>
          > -->
        <p>{{ value }}</p>
      </div>
    </div>

    <div class="allResults w">
      <div class="allResults-fenlei">
        <div class="titles">品牌</div>
        <ul>
          <li>
            <p :class="{ con: fenleiName == '健身' }" @click="fenlei('健身')">
              健身镜
            </p>
          </li>
          <li>
            <p :class="{ con: fenleiName == '屏' }" @click="fenlei('屏')">
              智能屏
            </p>
          </li>
          <li>
            <p :class="{ con: fenleiName == '笔' }" @click="fenlei('笔')">
              词汇笔
            </p>
          </li>
          <li>
            <p :class="{ con: fenleiName == '电视' }" @click="fenlei('电视')">
              巨幕电视
            </p>
          </li>
          <li>
            <p :class="{ con: fenleiName == '平板' }" @click="fenlei('平板')">
              学习平板
            </p>
          </li>
          <li>
            <p :class="{ con: fenleiName == '教' }" @click="fenlei('教')">
              智能家教
            </p>
          </li>
        </ul>
      </div>

      <div class="allResults-son">
        <div class="toubufenlei">
          <div class="shuliang">
            找到<span>{{ fenleis.length }}</span
            >个商品
          </div>
        </div>

        <el-button
          type="primary"
          @click="toDetails"
          v-loading.fullscreen.lock="fullscreenLoading"
        >
        </el-button>
        <div class="shangping">
          <ul>
            <li
              v-for="(item, index) in fenleis"
              :key="index"
              @click="toDetails(item.id)"
            >
              <div class="pic">
                <img :src="item.imageUrl" width="230" height="230" alt="" />
              </div>
              <div class="introduce">
                <h4>{{ item.name }}</h4>
                <p>{{ item.text }}</p>
                <p>
                  <span>¥{{ item.originalPrice }}.00</span>
                  <span>¥{{ item.presentPrice }}.00</span>
                </p>
              </div>
              <div class="comment">
                <p>{{ item.comment[0].content }}</p>
                <p>{{ item.comment[0].username }}</p>
              </div>
              <div class="satisfied">
                <p>
                  <span class="iconfont icon-xiaolian"></span> 满意度{{
                    item.satisfied
                  }}
                </p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <foot-data></foot-data>
  </div>
</template>

<script>
import topData from "@/components/topData.vue";
import FootData from "@/components/footData.vue";
export default {
  data() {
    return {
      sousuoLists: null,
      value: "",
      fenleiName: "",
      fullscreenLoading: false,
    };
  },
  methods: {
    fenlei(val) {
      this.fenleiName = val;
    },
    toDetails(id) {
      this.fullscreenLoading = true;
      setTimeout(() => {
        this.fullscreenLoading = false;
        this.$router.push({
          path: "detailsView",
          query: {
            id,
          },
        });
      }, 2000);
    },
  },
  computed: {
    fenleis() {
      return this.sousuoLists.filter((item) => {
        return item.name.includes(this.fenleiName);
      });
    },
  },
  created() {
    this.sousuoLists = JSON.parse(window.localStorage.getItem("sousuoLists"));
    this.value = this.$route.query.keyword;
    this.fenleiName = this.$route.query.keyword;
  },
  components: { topData, FootData },
};
</script>

<style lang="scss" scoped>
@import "../assets/css/public.scss";
@import "../assets/css/search.scss";
</style>